<div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span *ngIf="generalTool.id">编辑工具</span>
                        <span *ngIf="!generalTool.id">创建新的工具</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="title">工具名称 *</label>
                                <input id="title" #titleInput="ngModel" type="text" name="title" class="form-control"
                                    [(ngModel)]="generalTool.title" required>
                                <validation-messages [formCtrl]="titleInput"></validation-messages>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>分类 *</label>
                                <select class="form-control" name="classificationId"
                                    [(ngModel)]="generalTool.classificationId" required>
                                    <option *ngFor="let item of classifications" value="{{item.value}}">
                                        {{item.displayText}}</option>
                                </select>
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="brand">品牌</label>
                                <input id="brand" type="text" name="brand" class="form-control"
                                    [(ngModel)]="generalTool.brand">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="manufacturer">制造厂商</label>
                                <input id="manufacturer" type="text" name="manufacturer" class="form-control"
                                    [(ngModel)]="generalTool.manufacturer">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="model">型号</label>
                                <input id="model" type=" text" name="model" class="form-control"
                                    [(ngModel)]="generalTool.model">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="spec">规格</label>
                                <input id="spec" type=" text" name="spec" class="form-control"
                                    [(ngModel)]="generalTool.spec">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="location">存放位置</label>
                                <input id="location" type="text" name="location" class="form-control"
                                    [(ngModel)]="generalTool.location">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="unitPrice">单价</label>
                                <input id="unitPrice" type="text" name="unitPrice" class="form-control"
                                    [(ngModel)]="generalTool.unitPrice">
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="serialNo">出厂编号</label>
                                <input id="serialNo" type="text" name="serialNo" class="form-control"
                                    [(ngModel)]="generalTool.serialNo">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="serialNo">计量单位</label>
                                <input id="unit" type="text" name="unit" class="form-control"
                                    [(ngModel)]="generalTool.unit">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="isNeedVerification">需周期鉴定</label>
                                <span class="m-switch m-switch--icon m-switch--success" style="display: block;">
                                    <label>
                                        <input type="checkbox" checked="checked" name="isNeedVerification"
                                            [(ngModel)]="generalTool.isNeedVerification">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="category">鉴定类别</label>
                                <select class="form-control" name="category" [(ngModel)]="generalTool.category"
                                    required>
                                    <option *ngFor="let item of categorys" value="{{item.value}}">{{item.displayText}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="verificationDate">鉴定日期</label>
                                <p-calendar [disabled]="!generalTool.isNeedVerification" [(ngModel)]="verificationDate"
                                    name="verificationDate" dateFormat="yy年m月d日" [locale]="es"
                                    [inputStyle]="{'width':'360px', height:'40px','padding-left':'20px'}"
                                    [inputStyleClass]="'form-control'"></p-calendar>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="nextVerificationDate">鉴定有效期</label>
                                <p-calendar [disabled]="!generalTool.isNeedVerification"
                                    [(ngModel)]="nextVerificationDate" name="nextVerificationDate" dateFormat="yy年m月d日"
                                    [locale]="es" [inputStyle]="{'width':'360px', height:'40px','padding-left':'20px'}"
                                    [inputStyleClass]="'form-control'"></p-calendar>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="maxLoad">最大载荷</label>
                                <input id="maxLoad" type="text" name="maxLoad" class="form-control"
                                    [(ngModel)]="generalTool.maxLoad">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="intoStockDate">入库日期</label>
                                <p-calendar [(ngModel)]="intoStockDate" name="intoStockDate" dateFormat="yy年m月d日"
                                    [locale]="es" [inputStyle]="{'width':'360px', height:'40px','padding-left':'20px'}"
                                    [inputStyleClass]="'form-control'"></p-calendar>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="maxLoad">备注</label>
                                <textarea id="remark" class="form-control" type="text" name="remark"
                                    [(ngModel)]="generalTool.remark" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="maxLoad">备注1</label>
                                <textarea id="remark1" class="form-control" type="text" name="remark1"
                                    [(ngModel)]="generalTool.remark1" rows="3"></textarea>
                            </div>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button [disabled]="saving" type="button" class="btn btn-default"
                            (click)="close()">{{l("Cancel")}}</button>
                        <button type="submit" class="btn btn-primary blue" [disabled]="!editForm.form.valid"
                            [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                            <i class="fa fa-save"></i>
                            <span>{{l("Save")}}</span>
                        </button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
